<!-- Iconfont.vue -->
<template>
  <i :class="iconFontClasses" :style="style"></i>
</template>

<script>
  export default {
    name: 'Iconfont',
    props: {
      name: {
        type: String,
        required: true,
      },
      size: {
        type: [Number, String],
        default: 16,
      },
      color: {
        type: String,
        default: '',
      },
      class: {
        type: String,
        default: '',
      },
    },
    computed: {
      iconFontClasses() {
        return ['iconfont', `${this.name}`, this.class];
      },

      style() {
        return { 'font-size': `${this.size}px`, color: this.color || undefined };
      },
    },
  };
</script>

<style scoped>
  .iconfont {
    font-family: 'iconfont' !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
</style>
